<template>
    <div>
        <div id="example1"
            class="static"
            v-bind:class="this.classObj">Hello</div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({})
export default class ClassAndStyleExample extends Vue {
    name = '';
    isActive = true;
    hasError = true;
    error = null;
    get classObj(){
        return{
            active:this.isActive && !this.error,
            "text-danger":this.error === "fatal"
        }
    }
}
</script>

<style scoped>
.static{
    font-size: 24px;
}
.active{
    text-align: left;
}
.text-danger{
    color:red;
}
</style>
